<template>
  <div class="order">
    <div class="order-back">
      <span @click="back"></span>
    </div>
    <div class="order-title">
      <p>订单详情</p>
    </div>
    <div class="order-tab">
      <van-tabs
        v-model="active"
        animated
        :line-height="2"
        color="#21b276"
        title-active-color="#21b276"
        title-inactive-color="#999"
        @change="beforeChange"
      >
        <van-tab
          v-for="(item, index) in orderList"
          :title="item.title"
          :key="index"
        >
          <div class="order-list">
            <div v-if="allOrderData.length > 0">
              <div
                class="list-commodity"
                v-for="(v, i) in allOrderData"
                :key="i"
              >
                <div class="commodity-title">
                  <span>{{ v.oid }}</span>
                </div>
                <div class="list" v-for="(val, index) in v.data" :key="index">
                  <div class="cmdty-img">
                    <img class="autoImg" :src="val.smallImg" />
                  </div>
                  <div class="cmdty-name">
                    <div class="trade-name">
                      <div class="chname">
                        <span>{{ val.name }}</span>
                      </div>
                      <div class="enname">
                        <span>{{ val.enname }}</span>
                      </div>
                    </div>
                    <div class="cmdty-rules">
                      <span>{{ val.rule }}</span>
                    </div>
                  </div>
                  <div class="cmdty-price">
                    <div class="price_order">
                      <span>&yen;{{ val.price }}</span>
                    </div>
                    <div class="count_order">
                      <span>x&nbsp;{{ val.count }}</span>
                    </div>
                  </div>
                </div>

                <div class="pay-confirm" v-if="v.status === 2">
                  <div class="pay-option">
                    <span>已完成</span>
                  </div>
                  <div class="pay-icon" @click="removeOrder(v.oid, i)">
                    <van-icon name="delete-o" size="20" />
                  </div>
                </div>
                <div class="pay-confirm" v-if="v.status === 1">
                  <div class="pay-option" @click="confirmOrder(v, i)">
                    <span>确认订单</span>
                  </div>
                </div>
                <van-divider
                  :style="{
                    color: '#f7f7f7',
                    borderColor: '#666',
                    padding: '0 16px',
                    marginTop: '5px',
                  }"
                />
                <div class="addressee">
                  <div class="addressee-title">
                    <span>配送信息</span>
                  </div>
                  <div class="addressee-user">
                    <div class="username">
                      <span class="point"></span>
                      <span class="name-user">{{ v.proInfo.receiver}}</span>
                    </div>
                    <div class="user-phone">
                      <span>{{ v.proInfo.phone }}</span>
                    </div>
                  </div>
                  <div class="address">
                    <div>
                      <span>{{v.proInfo.address}}</span>
                    </div>
                  </div>
                </div>
                <div class="order-total">
                  <div class="total">
                    <div class="total-pay">
                      <span>总计:</span>
                    </div>
                    <div class="total-time">
                      <span>{{
                        v.proInfo.date | formatDate("yyyy-MM-dd hh:mm:ss")
                      }}</span>
                    </div>
                  </div>
                  <div class="price">
                    <span>&yen;{{ v.proInfo.total }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div v-else>
              <van-empty description="没有该状态的订单" />
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import "../assets/less/order.less";
export default {
  name: "Order",
  data() {
    return {
      active: 0,
      orderList: [
        {
          title: "全部",
          status: 0,
        },
        {
          title: "进行中",
          status: 1,
        },
        {
          title: "已完成",
          status: 2,
        },
      ],
      allOrderData: [],
    };
  },
  created() {
    this.getAllOrderData(0);
  },

  methods: {
    beforeChange(name) {
      this.getAllOrderData(name);
    },

    back() {
      this.$router.push({ name: "Home" });
    },
    getAllOrderData(status) {
      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        console.log("浏览器token不存在");
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        //请求方式
        method: "GET",
        url: this.baseUrl + "/findOrder",
        params: {
          appkey: this.appkey,
          tokenString,
          status,
        },
      })
        .then((res) => {
          // console.log(res);
          this.$toast.clear();

          if (res.data.code == 700) {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
            return this.$router.push({ name: "Login" });
          }

          if (res.data.code === 70000) {
            let products = [];

            let oids = [];

            res.data.result.forEach((v) => {
              v.small_img = v.smallImg;
              if (oids.indexOf(v.oid) === -1) {
                let o = {
                  oid: v.oid,
                  status: v.status,
                  proInfo: {
                    date: v.updatedAt,
                    count: 0,
                    total: 0,
                    address: v.address,
                    receiver: v.receiver,
                    phone: v.phone,
                  },
                  data: [],
                };
                oids.push(v.oid);
                products.push(o);
              }
            });
            products.forEach((value) => {
              res.data.result.forEach((item) => {
                if (value.oid === item.oid) {
                  value.data.push(item);
                  value.proInfo.count += item.count;
                  value.proInfo.total += item.count * item.price;
                }
              });
            });

            this.allOrderData = products;
          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
    confirmOrder(item, index) {
      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        console.log("浏览器token不存在");
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        //请求方式
        method: "POST",
        url: this.baseUrl + "/receive",
        data: {
          appkey: this.appkey,
          tokenString,
          oid: item.oid,
        },
      })
        .then((res) => {
          // console.log(res);
          this.$toast.clear();

          if (res.data.code == 700) {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
            return this.$router.push({ name: "Login" });
          }

          if (res.data.code === 80000) {
            item.status = 2;

            if (this.activeTabIndex === 1) {
              //移除当前tab的订单数据
              this.orderData.splice(index, 1);
            }
          }
          this.$toast({
            message: res.data.msg,
            forbidClick: true,
            duration: 3000,
          });
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
    removeOrder(oid, index) {
      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        console.log("浏览器token不存在");
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        //请求方式
        method: "POST",
        url: this.baseUrl + "/removeOrder",
        data: {
          appkey: this.appkey,
          tokenString,
          oid,
        },
      })
        .then((res) => {
          this.$toast.clear();

          if (res.data.code == 700) {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
            return this.$router.push({ name: "Login" });
          }

          if (res.data.code === 90000) {
            this.orderData.splice(index, 1);
          }

          this.$toast({
            message: res.data.msg,
            forbidClick: true,
            duration: 3000,
          });
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err ==> ", err);
        });
    },
  },
};
</script>